<template>
  <div class="opinion-page">
    <nav-bar title="意见建议" border></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-form validate-trigger="onSubmit" :show-error="false" @submit="onSubmit">
        <van-cell size="large" title="意见建议" :border="false" />
        <van-field
          class="van-field__value--textarea"
          v-model="formParams.opinion"
          rows="12"
          autosize
          type="textarea"
          maxlength="200"
          placeholder="请将您app使用过程中遇到的问题进行反馈"
          show-word-limit
          :border="false"
          :rules="rules.opinion"
        />
        <div style="margin: 32px 16px">
          <van-row :gutter="23">
            <van-col span="12">
              <van-button block native-type="button" @click="onClear">清空</van-button>
            </van-col>
            <van-col span="12">
              <van-button block type="info" native-type="submit" :loading="button.loading" :disabled="button.disabled">
                {{ button.text }}
              </van-button>
            </van-col>
          </van-row>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import My from '@/api/my'
export default {
  data() {
    return {
      formParams: {
        opinion: ''
      },
      rules: {
        opinion: [
          { required: true, message: '请输入您的建议或者意见' },
          {
            validator: val => {
              return val.length >= 5
            },
            message: '意见建议至少填写5个字'
          }
        ]
      },
      button: {
        disabled: false,
        loading: false,
        text: '提交'
      }
    }
  },
  methods: {
    onClear() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否清空所有内容',
          confirmButtonText: '是',
          cancelButtonText: '否'
        })
        .then(() => {
          this.formParams.opinion = ''
        })
    },
    onSubmit() {
      My.Opinion.save(this.formParams)
        .then(res => {
          this.button.disabled = false
          this.button.loading = false
          this.button.text = '提交'
          const { status } = res.data
          if (status === 0) {
            this.$toast.success('提交成功')
            this.$router.go(-1)
          } else {
            this.$toast.fail(res.data.message)
          }
        })
        .catch(() => {
          this.button.disabled = false
          this.button.loading = false
          this.button.text = '提交'
        })
    }
  }
}
</script>
